const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')

//tree shaking
//只提取用到的部分；且必须使用es6的模块系统
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

const extractLess = new ExtractTextPlugin({
	filename:'../style/[name].css',
	disable:process.env.NODE_ENV === 'development'
})

module.exports = {
	entry: {
		index: './src/script/index.js',
		vendor:['react','react-dom']
	},
	output: {
		path: path.resolve(__dirname, 'build/script'),
		filename: '[name].js'
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				include: [
					path.resolve(__dirname, 'src/script')
				],
				loader: 'babel-loader'
			},
			{
				test: /\.less$/,
				include: [
					path.resolve(__dirname, 'src/style')
				],
				use: extractLess.extract({
					use: [{
						loader: 'css-loader'
					}, {
						loader: 'less-loader'
					}],
					// use style-loader in development
					fallback: 'style-loader'
				})
			}
		]
	},
	//独立出CSS样式
	//runtime 打包系统
	plugins:[
		extractLess,
		new webpack.optimize.CommonsChunkPlugin({
			names:['vendor','runtime']
		}),
		new UglifyJSPlugin()
	],
	//独立出js
	// externals:{
	// 	'react':'React',
	// 	'react-dom':'ReactDOM'
	// }
}
